<script setup lang="ts">
import { getColWidth, setLastWidth } from '@/utils/FormatData'
import { ref, watch } from 'vue'
const props = defineProps(['data', 'cols'])
const boxRef = ref()
const column = ref()
watch(
  () => props.cols,
  () => {
    const boxWidth = boxRef.value?.offsetWidth
    if (props.cols.length) {
      column.value = getColWidth(props.cols, boxWidth)
      setLastWidth(column.value, boxWidth)
    }
  }
)
</script>
<template>
  <div ref="boxRef">
    <el-table stripe :data="data" class="mt-2">
      <template v-for="item in column" :key="item.Key">
        <el-table-column
          align="center"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template #default="scope">
            <template v-if="item.key == 'progress'">
              <span class="text-green-400" v-if="scope.row[item.key] == '82/82'">{{
                scope.row[item.key]
              }}</span>
              <span class="text-amber-400" v-else>{{ scope.row[item.key] }}</span>
            </template>
            <template v-else-if="item.key == 'status'">
              <span class="text-amber-400" v-if="scope.row[item.key] == '待AGV'">{{
                scope.row[item.key]
              }}</span>
              <span class="text-green-400" v-else>{{ scope.row[item.key] }}</span>
            </template>
            <template v-else-if="item.key == 'tower'">
              <span class="text-green-400" v-if="scope.row[item.key] == 82">{{
                scope.row[item.key]
              }}</span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
            <template v-else-if="item.key == 'time'">
              <span class="text-red-500" v-if="scope.row[item.key] == '15:20'">{{
                scope.row[item.key]
              }}</span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
            <template v-else
              ><span>{{ scope.row[item.key] }}</span></template
            >
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
